
<template>
  <d2-container>
    <div style="display: inline-block;background-color: white;height:300px;width: 70%;position: relative;overflow: hidden;float: left">
<!--       今日总览 报名数据 
      营收数据
      上课书
      我的班级，课程信息 -->
      <span style="width: 45%;height: 140px;position: relative;display: inline-block;margin-top: 15px;margin-left:3.3%;position: relative;margin-top: 80px">
          <div  style="height:40px;position: absolute;top:0px"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3px'>_</span>
            今日数据
            <div style='margin-top: 20px'><span style="color:#98A0A7">新增课程订单数量：</span>{{adminData.course}}</div>
            <div style='margin-top: 10px'><span style="color:#98A0A7">新增教材订单数量：</span>{{adminData.product}}</div>
        </div>

      </span>
      <span style="width: 45%;height: 140px;position: relative;display: inline-block;margin-top: 15px;margin-left:3.3%;margin-top: 80px">
        <div  style="height:40px;position: absolute;top:0px"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3px'>_</span>
            今日营收
            <div style='margin-top: 20px'><span style="color:#98A0A7">课程营收：</span>{{financeData.course}}元</div>
            <div style='margin-top: 10px'><span style="color:#98A0A7">教材营收：</span>{{financeData.product}}元</div>
        </div>
      </span>

     
    </div>
    <div style="display: inline-block;background-color: white;height:300px;width: 28%;margin-left:20px;position: relative;">
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3'>_</span>
            学校详情
        </div>
        <div style='margin-top: 50px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">学校名称:  </span>{{schoolData.name}}</div>
        <div style='margin-top: 10px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">联系方式:  </span>{{schoolData.contact}} ({{schoolData.telephone == '' ? '暂无' : schoolData.telephone}})</div>
                 <div style='margin-top: 10px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">地址:  </span>{{schoolData.address}}</div>

        <div style='margin-top: 10px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">学生数:  </span>{{schoolData.students}} / {{schoolData.studentLimit}}</div>
        <div style='margin-top: 10px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">员工数:  </span>{{schoolData.staffs}}</div>
        <div style='margin-top: 10px;margin-left: 20px'><span style="color:#98A0A7;width:80px;display: inline-block;">班级数:  </span>{{schoolData.classes}}</div>

    </div>
    <div style="display: inline-block;background-color: white;height:300px;width: 100%;position: relative;margin-top: 20px">
      <div  style="height:40px;position: absolute;top:10px;left:10px;z-index: 100"><span style='width:2px;height:100%;background-color:rgb(52, 178, 211) ;color: rgb(52, 178, 211);margin-right: 3'>_</span>
            7天收入
        </div>

        <div style="margin-bottom: 20px" >
      <div id="course_income_2" :style="{width: '100%', height: '260px',color:'#ccc',marginTop:'40px'}">

        </div>
      </div>
    </div>

  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import { constants } from 'crypto';
    import {mapState} from "vuex";

export default {
  data() {
    return {
      schoolList: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      schoolListSearch: {
        name: "",
        type: 2
      },
      adminData : {'course':0,'product':0},
      financeData : {'course':0,'product':0},
      myClass : [],
      courseReminder : [],
      inoutNotif : [],
      myIncome : [],
      plot : {data:[]},
      table :{},
      schoolData : {}
    };
  },
  computed: {
            ...mapState('d2admin/user', ['info']),
        },
  methods: {
                drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart6 = this.$echarts.init(document.getElementById('course_income_2'))

      // 绘制图表
      myChart6.setOption({
        title: {
          text: ''
        },
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data:this.plot.name
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : this.plot.date,

          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel:{
              formatter:`{value}元`
            }
          }
        ],
        series :this.plot.data
      })

    },


    formSubmit() {
      this.getSchoolList(1, 10);
    },

    formReset() {
      this.schoolListSearch = {}
      this.getSchoolList(1, 10);
    },
    handleClick(e) {
      this.$router.push({ path: "/school-detail?id=" + e._id });
    },
    deleteClick(e) {
      this.$confirm("此操作将删除该校区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        request({
          url: "/school/deleteSchool",
          method: "post",
          data: {id: e._id}
        }).then(res => {
          if (res.code == 200) {
            this.getSchoolList(1, this.pageSize);
            this.$message({
              message: "删除成功"
            });
          }
        });
      }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
    },
    handleCurrentChange(e) {
      this.getSchoolList(e, this.pageSize);
    },
    handlerSizeChange(e) {
      this.pageSize = e;
      this.getSchoolList(1, this.pageSize);
    },
    handleNextPage(e) {
      this.getSchoolList(e, this.pageSize);
    },
    handlePrevClick(e) {
      this.getSchoolList(e, this.pageSize);
    },
    getSchoolList(page, pageSize) {
      var data = {};
      if (this.schoolListSearch.name != "") {
        data.name = this.schoolListSearch.name;
      }
      if (this.schoolListSearch.type != 2) {
        data.type = this.schoolListSearch.type;
      }
      (data.page = page), (data.pageSize = pageSize);
      request({
        url: "/school/getSchoolList",
        method: "post",
        data
      }).then(res => {
        for (var i = 0; i < res.data.school.length; i++) {
          res.data.school[i].deadlineText = this.formatDate(res.data.school[i].deadline);
          if (res.data.school[i].payStatus == 1) {
            res.data.school[i].payStatusText = "已缴费";
          } else if (res.data.school[i].payStatus == 0) {
            res.data.school[i].payStatusText = "未缴费";
          }
        }
        this.schoolList = res.data.school;
        this.total = res.data.total
        this.currentPage = res.data.page

        // 返回数据
      });
    },
    formatDate(date) {
      var date = new Date(date);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return [year, month, day].map(this.formatNumber).join("-");
    },
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },
    getTodayFinanceData(){
      request({
        url: "/data/getTodayFinanceData",
        method: "post",
        data :{school:this.theSchool}
      }).then(res => {
        if (res.code == 200){
          if (res.data.course.length > 0){
             this.financeData.course = res.data.course[0].total - res.data.course[0].discount
          }
          if (res.data.product.length > 0){
             this.financeData.product = res.data.product[0].total - res.data.product[0].discount
          }
      }
      })
    },
    getTodayAdminData(){
      request({
        url: "/data/getTodayAdminData",
        method: "post",
        data :{school:this.theSchool}
      }).then(res => {
        if (res.code == 200){
          this.adminData = res.data
        }
      })
    },


    getSchoolTotalIncome(){
      let today = new Date()
      let startDate = new Date(today.getTime() - 7 * 24 * 3600000)
      request({
        url: "/data/getSchoolTotalIncome",
        method: "post",
        data :{school:this.theSchool,start_time:startDate,end_time:new Date(),period:'day'}
      }).then(res => {
        this.schoolIncome = res.data

                        this.plot.name = []
                        for (var j = 1 ; j < res.data.columns.length ; j++){
                            this.plot.name.push(res.data.columns[j].label)
                        }
                        var bububu = []
                        for (var i = 0 ; i < res.data.data.length ; i++){
                            bububu.push(res.data.data[i])
                        }
                        bububu.sort(function(a,b){return new Date(a.date) - new Date(b.date) })
                        console.log(bububu)
                        this.plot.date = bububu.map(function(e){return e.date})
                        this.plot.data = []
                        for (var i =0 ; i < this.plot.name.length ; i++){
                            this.plot.data.push({
                                name :res.data.columns[i + 1].label,
                                type : 'bar',
                                // stack : '总量',
                                areaStyle : {},
                                data :bububu.map(function(e){return e[res.data.columns[i + 1].prop]})
                            })
                        }
                        this.drawLine()

      })
    },


    getSchoolOne(id) {
                request({
                    url: "/school/getSchoolOneDetail",
                    method: "post",
                    data: {id: id}
                }).then(res => {
                    console.log(res)
                    this.schoolData = res.data

                });
            }
  },
  created() {
    this.school = this.info.school[0]._id
     this.staff = this.info.staff == undefined ? null : this.info.staff._id
            this.staffname = this.info.staff == undefined ? '' : this.info.staff.name
    this.rights = this.info.rights.map(function(e){return e.name})

    if (this.$route.query.id != undefined) {
                this.theSchool = this.$route.query.id
                this.getSchoolOne(this.$route.query.id)
                this.getSchoolTotalIncome()
                this.getTodayAdminData()
                this.getTodayFinanceData()
            }

  }
};
</script>
